<div class="comment">
  <div class="row">
    <div class="col-1">
      <h5><b>审核状态</b></h5>
    </div>
    <div class="col-2">
      <select class="form-control text_search">
        <option value="" disabled selected hidden>请选择</option>
        <option class="val">待审核</option>
        <option class="val">通过</option>
        <option class="val">不通过</option>
      </select>
    </div>
    <div class="col-1">
      <h5><b>关键字</b></h5>
    </div>
    <div class="col-2">
      <form>
        <div class="form-group">
          <input type="text" class="form-control text_search">
        </div>
      </form>
    </div>
    <div class="col-1">
      <button type="button" class="btn btn-link search">搜索</button>
    </div>
  </div>
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th scope="col" class="col-1">序号</th>
        <th scope="col" class="col-6">评论内容</th>
        <th scope="col" class="col-2">评论日期</th>
        <th scope="col" class="col-1">状态</th>
        <th scope="col" class="col-2">操作</th>
      </tr>
    </thead>
    <tbody>
     
    </tbody>
  </table>
</div>
<script>
  //声明全局变量
  var baseUrl='http://182.92.83.218:7788/';
  currentPage=1;
  pageSize=10;
  //通过promise封装请求函数
  function getData(type,url){
    var p=new Promise((resolve,reject)=>{
      //发送异步请求
      $.ajax({
        url:url,
        type:type,
        headers:{
          "Authorization":sessionStorage.getItem('token')
        },
        success:function(data){
          //每次请求数据后，处理的数据不一样，即不能在这里直接进行数据处理
          resolve(data)
        }
      })
    })
    return p;
  }
  function getCommentData(url){
    return getData('GET',baseUrl+url).then(function(data){
      // console.log(data);
      data.data.list.forEach(function(item){
        $('.comment tbody').append(`<tr>
          <td>`+item.id+`</td>
          <td>`+item.content+`</td>
          <td>`+new Date(item.commentTime).toLocaleDateString()+`</td>
          <td><span class=zhuangtai>`+item.status+`</span></td>
          <td class='a'>
            <span class="deleteById">删除</span>
            <span class='pass'>通过</span>
            <span class='nopass'>不通过</span>
          </td>
          </tr>`)

      })
    })
  }
  getCommentData('comment/pageQuery?page=1&pageSize=10');
  //给搜索按钮绑定事件
  $('.comment .search').click(function(){
    //1.获取关键字和审核状态
    var status=$('.comment .text_search').eq(0).val();
    var keywords=$('.comment .text_search').eq(1).val();
    //2.判断用户输入
    if(keywords==''){
      url='comment/pageQuery?page=1&pageSize=10';
    }else{
      url='comment/pageQuery?page=1&pageSize=10&keywords='+keywords;
    }
    console.log(url)
    $('.comment tbody').empty();
    getCommentData(url);
  })
  //给删除按钮绑定事件
  $('.comment tbody').on('click','.deleteById',function(event){
    var id=$(event.target).parent().parent().children().eq(0).text();
    // console.log(id);
    getData('GET',baseUrl+'comment/deleteById?id='+id).then(function(data){
      if(data.status==200){
        alert(data.message);
        //刷新页面
        $('.comment tbody').empty();
        getCommentData('comment/pageQuery?page=1&pageSize=10');
      }
    })
  })
  

</script>
<style>
  .comment .zhuangtai{
    position: relative;
    padding: 5px;
    background-color: #fff8e6;
    border-color: #fff1cc;
    color: #ffba00;
  }
  .comment .a span{
    padding-right: 10px;
  }
  .comment .a .pass,.comment .a .nopass{
    padding-right: 10px;
    color: #c0c4cc;
    cursor: not-allowed;
  }
  .comment .deleteById{
    color: #2cb5ac;
    font-size: 12px;
  }
  
</style>